import { FC } from "react";
import QuestionInputConf, { QuestionInputPropsType } from "./QuestionInput";
import QuestionTitleConf, { QuestionTitlePropsType } from "./QuestionTitle";
import QuestionParagraphConf, {
  QuestionPargraphPropsType,
} from "./QuestionPargraph";
import QuestionInfoConf, { QuestionInfoPropsType } from "./QuestionInfo";
import QuestionTextareaConf, {
  QuestionTextareaPropsType,
} from "./QuestionTextarea";
import QuestionRadioConf, {
  QuestionRadioPropsType,
  QuestionRadioStatComponentType,
} from "./QuestionRadio";
import QuestionCheckboxCof, {
  QuestionCheckboxPropsType,
  QuestionCheckboxStatComponentType,
} from "./QuestionCheckbox";

//各个组件的priops type
export type ComponentPropsType = QuestionInputPropsType &
  QuestionTitlePropsType &
  QuestionPargraphPropsType &
  QuestionInfoPropsType &
  QuestionTextareaPropsType &
  QuestionRadioPropsType &
  QuestionCheckboxPropsType;

//同意个个组件的统计属性类型
type ComponentStatPropsType = QuestionRadioStatComponentType &
  QuestionCheckboxStatComponentType;

// 组件的配置
export type ComponentConfType = {
  title: string;
  type: string;
  Component: FC<ComponentPropsType>;
  ProComponent: FC<ComponentPropsType>;
  defaultProps: ComponentPropsType;
  StatComponent?: FC<ComponentStatPropsType>; // 不必必填，某些组件没有统计组件；比如段落input组件不需要统计组件
};

// 全部的组件配置列表
const componentConfList: ComponentConfType[] = [
  QuestionInputConf,
  QuestionTitleConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestionTextareaConf,
  QuestionRadioConf,
  QuestionCheckboxCof,
];

// 组件分组
export const componentsConfGroup = [
  {
    groupId: "textGroup",
    groupName: "文本显示",
    components: [QuestionTitleConf, QuestionParagraphConf, QuestionInfoConf],
  },
  {
    groupId: "inputGroup",
    groupName: "用户输入",
    components: [QuestionInputConf, QuestionTextareaConf],
  },
  {
    groupId: "chooseGroup",
    groupName: "用户选择",
    components: [QuestionRadioConf, QuestionCheckboxCof],
  },
];

export function getComponentConfByType(type: string) {
  //统一返回组件，传入type 可以返回指定的组件
  return componentConfList.find((c) => c.type === type);
}
